.amplify-accordion {
  display: block;
  background-color: var(--amplify-components-accordion-background-color);
  border-radius: var(--amplify-components-accordion-item-border-radius);
}

.amplify-accordion__item {
  display: block;
  position: relative;
  border-width: var(--amplify-components-accordion-item-border-width);
  border-style: var(--amplify-components-accordion-item-border-style);
  border-color: var(--amplify-components-accordion-item-border-color);

  // This is so we don't get double-borders
  & + .amplify-accordion__item {
    margin-block-start: calc(
      -1 * var(--amplify-components-accordion-item-border-width)
    );
  }

  &:where(:first-of-type) {
    border-start-end-radius: var(
      --amplify-components-accordion-item-border-radius
    );
    border-start-start-radius: var(
      --amplify-components-accordion-item-border-radius
    );
  }

  &:where(:last-of-type) {
    border-end-end-radius: var(
      --amplify-components-accordion-item-border-radius
    );
    border-end-start-radius: var(
      --amplify-components-accordion-item-border-radius
    );
  }

  &__trigger {
    cursor: pointer;
    display: flex;
    position: relative;
    color: var(--amplify-components-accordion-item-trigger-color);
    border-radius: var(--amplify-components-accordion-item-border-radius);
    padding-inline: var(
      --amplify-components-accordion-item-trigger-padding-inline
    );
    padding-block: var(
      --amplify-components-accordion-item-trigger-padding-block
    );
    gap: var(--amplify-components-accordion-item-trigger-gap);
    align-items: var(--amplify-components-accordion-item-trigger-align-items);
    justify-content: var(
      --amplify-components-accordion-item-trigger-justify-content
    );

    &:hover {
      background-color: var(
        --amplify-components-accordion-item-trigger-hover-background-color
      );
      color: var(--amplify-components-accordion-item-trigger-hover-color);
    }
    &:focus {
      box-shadow: var(
        --amplify-components-accordion-item-trigger-focus-box-shadow
      );
      border-color: var(
        --amplify-components-accordion-item-trigger-focus-border-color
      );
      // this allows the box shadow to appear above the items that come after it
      z-index: 2;
    }

    // the summary element has a webkit psuedo element that looks like ▶︎
    // but we have our own indicator, lets hide this one
    &::-webkit-details-marker {
      display: none;
    }
  }

  &__content {
    display: block;
    color: var(--amplify-components-accordion-item-content-color);
    padding-block-end: var(
      --amplify-components-accordion-item-content-padding-block-end
    );
    padding-block-start: var(
      --amplify-components-accordion-item-content-padding-block-start
    );
    padding-inline: var(
      --amplify-components-accordion-item-content-padding-inline
    );
  }

  &__icon {
    color: var(--amplify-components-accordion-item-icon-color);
    transition-property: transform;
    transition-duration: var(
      --amplify-components-accordion-item-icon-transition-duration
    );
    transition-timing-function: var(
      --amplify-components-accordion-item-icon-transition-timing-function
    );

    [open] & {
      transform: rotate(180deg);
    }
  }
}
